<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='chrome=1'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta name='mobile-web-app-capable' content='yes'>
    <meta name='apple-mobile-web-app-capable' content='yes'>

    <meta name='twitter:card' content='summary'>
    <meta name='twitter:title' content='WebXR Samples'>
    <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">

    <link rel='stylesheet' href='css/stylesheet.css'>
    <link rel='stylesheet' href='css/pygment_trac.css'>

    <style>
      article {
        position: relative;
        padding: 0.5em;
        background-color: rgba(255, 255, 255, 0.90);
        margin-bottom: 1em;
        border-radius: 3px;
      }

      article h3 {
        font-size: 1.0em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article h3::before {
        display: inline-block;
        content: attr(data-index) ' - ';
        font-weight: bold;
        white-space: nowrap;
        margin-right: 0.2em;
      }

      article h4 {
        position: absolute;
        right: 0.5em;
        top: 0.5em;
        margin-top: 0px;
        margin-bottom: 0px;
      }

      article p {
        margin: 0.5em;
      }

      article .links {
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      article a {
        display: inline-block;
      }

      article a:not(:first-child)::before {
        display: inline-block;
        content: '•';
        font-weight: bold;
        white-space: nowrap;
        margin-left: 0.5em;
        margin-right: 0.5em;
      }

      .github-link {
        font-size: 0.8em;
      }
    </style>

    <!--[if lt IE 9]>
    <script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
    <![endif]-->
    <title>WebXR - Samples</title>
  </head>
  <body>

    <div class='container' id='container'>
      <header class='header'>
        <div id='nav'>
            <a href='./index.html' class='selected'>Samples</a>
            <a href='proposals/index.html'>Proposals</a>
            <a href='tests/index.html'>Test Pages</a>
        </div>

        <h1><a href='' class='wordmark'><span>WebXR</span></a></h1>
        <h2 class='tagline'>Sample Pages</h2>
      </header>

      <main class='main' id='main'>
        <p>Sample pages demonstrating how to use various aspects of the WebXR API.<br/>
        <a href="explainer.html">Learn More</a></p>

        <script>
          let pages = [
            { title: 'Barebones', category: 'Basics',
              path: 'xr-barebones.html',
              description: 'Extremely simple use of WebXR with no library dependencies. Doesn\'t render anything exciting.' },

            { tag: 'hr' },
            { tag: 'br' },

            { title: 'XR Presentation', category: 'Basics',
              path: 'xr-presentation.html',
              description: 'Demonstrates how to present a simple WebGL scene to a XRDevice.' },

            { title: 'Magic Window', category: 'Basics',
              path: 'magic-window.html',
              description: 'Demonstrates use of a non-exclusive XRSession to present "Magic Window" content.' },

            { title: 'Multiple Magic Window', category: 'Basics',
              path: 'magic-window-multi.html',
              description: 'Demonstrates use of multiple non-exclusive XRSessions to present "Magic Window" content.' },

            { title: 'Fallback Rendering', category: 'Basics',
              path: 'fallback-rendering.html',
              description: 'Demonstrates a way to fallback to rendering the scene when WebXR isn\'t available..' },

            { tag: 'hr' },
            { tag: 'br' },

            { title: 'Reduced-Bind Rendering', category: 'Performance',
              path: 'reduced-bind-rendering.html',
              description: 'Demonstrates a technique to reduce the number of state changes made while rendering.' },

            { title: 'Room Scale', category: 'Basics',
              path: 'room-scale.html',
              description: 'Demonstrates using a "stage" frame of reference to provide room scale tracking.' },

            { title: 'Input Tracking', category: 'Input',
              path: 'input-tracking.html',
              description: 'Demonstrates basic tracking and rendering of XRInputSources.'},

            { title: 'Teleportation', category: 'Input',
              path: 'teleportation.html',
              description: 'Demonstrates teleporting the viewer by updating the XRSession reference space.' },

            { title: 'Gamepad', category: 'Input',
              path: 'gamepad.html',
              variants: [{name: 'Show raw data', query: '?displayTables=true'}],
              description: 'Demonstrates handling input from Gamepads attached to XRInputSources.' },

            { title: 'Framebuffer Scaling', category: 'Performance',
              path: 'framebuffer-scaling.html',
              description: 'Demonstrates scaling a layer\'s framebuffer to statically control performance or quality.' },

            { title: '360 Stereo Photos', category: 'Content',
              path: '360-photos.html',
              description: 'Demonstrates displaying a 360 degree equirectangular stereo photo.' },

            { title: 'Stereo Video', category: 'Content',
              path: 'stereo-video.html',
              description: 'Demonstrates playing stereo videos.' },

            { title: 'Positional Audio', category: 'Content',
              path: 'positional-audio.html',
              description: 'Demonstrates playing audio that sounds as if it originates at a specific point in the space.' },

            { title: 'Spectator Mode', category: 'Advanced Techniques',
              path: 'spectator-mode.html',
              description: 'Demonstrates rendering a 3rd person view of the scene to an external monitor.' },
          ];

          let mainElement = document.getElementById("main");

          // Append an element for every item in the pages list.
          let tag_count = 0;
          for (var i = 0; i < pages.length; ++i) {
            var page = pages[i];

            if (page.tag) {
              tag_count++;
              mainElement.appendChild(document.createElement(page.tag));
              continue;
            }

            let article = document.createElement('article');

            let title = document.createElement('h3');
            title.setAttribute('data-index', i + 1 - tag_count);

            let titleLink = document.createElement('a');
            titleLink.href = page.path;
            titleLink.innerHTML = page.title;
            title.appendChild(titleLink);
            article.appendChild(title);

            let category = document.createElement('h4');
            category.innerHTML = page.category;
            article.appendChild(category);

            let description = document.createElement('p');
            description.innerHTML = page.description;
            article.appendChild(description);

            let links = document.createElement('div');
            links.classList.add('links');

            let liveLink = document.createElement('a');
            liveLink.href = page.path;
            liveLink.innerHTML = 'Open';
            links.appendChild(liveLink);

            let polyfillLink = document.createElement('a');
            polyfillLink.href = page.path + '?allowPolyfill=1';
            polyfillLink.innerHTML = 'Open with Polyfill';
            links.appendChild(polyfillLink);

            if (page.variants) {
              for (let i = 0; i < page.variants.length; ++i) {
                let variant = page.variants[i];
                let link = document.createElement('a');
                link.href = page.path + variant.query;
                link.innerHTML = variant.name;
                links.appendChild(link);
              }
            }

            let sourceLink = document.createElement('a');
            sourceLink.href = 'https://cs.chromium.org/chromium/src/third_party/webxr_test_pages/webxr-samples/' + page.path;
            sourceLink.innerHTML = 'Source';
            links.appendChild(sourceLink);

            article.appendChild(links);

            mainElement.appendChild(article);
          }
        </script>
      </main>

      <p>Models used in these samples come from <a href="https://poly.google.com">Poly</a>, and many were modeled in <a href="https://vr.google.com/blocks/">Blocks</a>.<br/>
      They a stored and loaded using the <a href="https://www.khronos.org/gltf/">glTF 2.0 format</a>.<br/>
      Attribution for individual models can be found under the <a href="https://github.com/immersive-web/webxr-samples/tree/master/media/gltf">media/gltf</a> folders for this repository.</p>

      <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View samples source on GitHub</a></h3>

      <footer class='footer'>
      </footer>
    </div>
  </body>
</html>
